import React, { Component } from "react";

class DemoForm extends Component {
    constructor(){
        super()
        this.state = {
            title:'受控组件',
            title1:'非受控组件'
        }
    }
    titleRef = React.createRef()

    updateTitle = (e) => {
        console.log('ee', e)
        this.setState({
          title: e.target.value
        })
      }
      
    getTitle = (e) => {
        e.preventDefault()
        console.log('ref-val', e, this.titleRef.current.value)
    }
    render() {
        console.log('ref',this.titleRef)
        return(<>
        <h2>受控与非受控组件</h2>
        <form onSubmit={this.getTitle}>
            <h2>受控组件</h2>
            <div>
                title:{this.state.title}
                <input type="text" value={this.state.title} readOnly/>
            </div>
            <h2>非受控组件</h2>
            <div>
                title:{this.state.title1}
                <input type="text" ref={this.titleRef} />
                <button>获取input的内容</button>
            </div>
        </form>
        </>)
    }
}
export default DemoForm